Pseudo-elements (::before, ::after, ::first-letter, etc.) allow you to insert decorative or stylistic content without modifying the HTML. In contrast, real elements like <span> or <div> require actual HTML markup and exist in the DOM.

Key Differences

1
Pseudo-elements are virtual; they do not exist in the DOM, whereas real elements are part of the DOM tree.
2
Pseudo-elements are ideal for simple decorations, icons, or visual enhancements that don’t need interactivity.
3
Real elements can hold child elements, receive events, and be manipulated with JavaScript, making them suitable for interactive content.
4
Using pseudo-elements reduces HTML clutter and keeps markup semantic, while real elements increase HTML complexity.
5
Pseudo-elements rely on the content property for insertion, while real elements can contain any HTML content.

Example: Decoration with ::before vs Real Element

In this example, the first paragraph uses ::before to insert a star without extra HTML. The second paragraph uses a real <span> element, which works similarly visually but requires markup changes and could increase DOM complexity.

Best Practices

1
Use pseudo-elements for non-interactive decorations or visual enhancements.
2
Use real elements when content needs to be interactive or accessible via JavaScript.
3
Combine pseudo-elements with CSS properties like color, background, transform, or border for visual effects.
4
Keep HTML semantic and clean by avoiding unnecessary elements when pseudo-elements suffice.

Difficulty: 6/10

Topics: pseudo-elements, semantic HTML, CSS rendering performance

Scenario Questions

0-2 years experience

1
You're building a button with a small arrow icon on the right — how would you decide whether to use a ::after pseudo-element or a real <span> inside the button?
2
If you use a ::before to add a star icon for a featured tag, but the icon doesn't show up on mobile, what are the first three things you'd check?
3
A designer gives you a mock with a decorative border gradient — you're told not to add extra HTML. How would you implement it using pseudo-elements?

2-5 years experience

1
A team member used pseudo-elements for all decorative icons in the app, but now accessibility audits are failing — how would you explain the issue and propose a fix?
2
We're seeing layout shifts on slow networks because decorative ::before elements are loaded late — what’s likely causing this, and how would you stabilize it?
3
A component uses 3 real <div> elements just for visual spacing and borders. The CSS is getting messy. How would you refactor this using pseudo-elements without breaking existing functionality?

5-8 years experience

1
In a high-traffic product page, we have 50+ pseudo-elements used for decorative borders and icons — how would you evaluate whether this impacts rendering performance or accessibility, and what metrics would you track?
2
Our design system uses pseudo-elements for tooltips and callouts, but they break in RTL layouts and screen readers. How would you redesign this to be maintainable across global markets?
3
A legacy component uses real elements for purely visual decoration, bloating the DOM tree. You're tasked with refactoring to pseudo-elements — what edge cases would you test, and how would you ensure no regressions in dynamic content?

8+ years experience

1
We're migrating from a legacy UI framework that relied on 200+ decorative <span> elements to a modern CSS-in-JS system — how would you architect a migration strategy that balances performance, accessibility, and developer experience?
2
Our design system has inconsistent use of pseudo-elements vs. real elements across 12 product teams — how would you define and enforce a policy that scales without stifling autonomy?
3
A major accessibility audit found that pseudo-elements used for status indicators are not announced by screen readers. As a staff engineer, how would you lead a cross-team initiative to fix this without breaking hundreds of components?

Follow-up Questions

❓How would you debug a layout issue where a ::before element isn't rendering?
❓What happens if you try to attach an event listener to a ::after pseudo-element?
❓When would you choose a real <span> over a ::before for a decorative icon?